<template>
  <div style="margin-top:12px">
    <n-grid >
      <n-grid-item span="3">
        <n-card bordered size="small" class="proCard" style="height: 100%">
          <n-thing
            class="thing-cell"
            v-for="item in typeTabList"
            :key="item.key"
            :class="{ 'thing-cell-on': type === item.key }"
            @click="switchType(item)"
          >
            <template #header>{{ item.name }}</template>
          </n-thing>
        </n-card>
      </n-grid-item>
      <n-grid-item span="21">
        <n-card :bordered="false" size="small"  class="proCard" >
         <span v-if="type == '1'" style="display:inline-block;padding-bottom:8px;font-size:18px;font-weight:500;margin-left:16px;margin-top:14px;">商户信息</span> 
          <MerchantInfo v-if="type == '1'"  />
          <span  v-if="type == '2'" style="display:inline-block;padding-bottom:8px;font-size:18px;font-weight:500;margin-left:16px;margin-top:14px;">安全设置</span> 
          <OtherSettting v-if="type == '2'" />
        </n-card>
      </n-grid-item>
    </n-grid>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import MerchantInfo from './MerchantInfo.vue';
import OtherSettting from './OtherSetting.vue';

const typeTabList = [
  {
    name: '商户信息',
    desc: '商户信息查看',
    key: 1,
  },
  {
    name: '安全设置',
    desc: '安全设置查看',
    key: 2,
  },
];

const type = ref(1);
const merchant = ref('商户名2333');
const typeTitle = ref('商户名：' + merchant.value);

function switchType(e) {
  console.log(e.key);
  
  type.value = e.key;
  console.log(type.value);
  
}
</script>
<style lang="less" scoped>
.thing-cell {
  margin: 0 -16px 10px;
  padding: 5px 16px;

  &:hover {
    background: #f3f3f3;
    cursor: pointer;
  }
}

.thing-cell-on {
  background: #f0faff;
  color: #2d8cf0;
  border-right: 3px solid #1890ff;

  ::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
    color: #2d8cf0;
  }

  &:hover {
    background: #f0faff;
  }
}


</style>
